<template>
  <div>
      <div class="outer3 flex-col">
        <div
          class="box1 flex-col"
          v-for="(item, index) in loopData0"
          :key="index"
        >
          <div class="group1 flex-col">
            <div class="mod1 u-flex u-row-between">
              <span class="word1" v-html="item.lanhutext0"></span>
              <div class="outer4 flex-col">
                <span class="info2" v-html="item.lanhutext1"></span>
              </div>
            </div>
            <div class="mod2 flex-col">
              <div class="bd2 u-flex u-row-between">
                <span class="info3" v-html="item.lanhutext2"></span>
                <img
                  class="label3"
                  referrerpolicy="no-referrer"
                  :src="item.lanhuimage0"
                />
              </div>
            </div>
            <div class="mod3 u-flex u-row-between">
              <span class="info4" v-html="item.lanhutext3"></span>
              <span class="word2" v-html="item.lanhutext4"></span>
            </div>
          </div>
          <div class="group2 flex-col"></div>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        loopData0: [
        {
          lanhutext0: '您分享了XXX活动，好友已打开活动链…',
          lanhutext1: '积分',
          lanhutext2: '获取10积分',
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng037176ac7a1a4b1cc83c2d81f60635787bee197e7e2967d5f81b5dce4247bc1a',
          lanhutext3: '未读',
          lanhutext4: '22/01/02',
        },
        {
          lanhutext0: '您分享了XXX活动，好友已打开活动链…',
          lanhutext1: '积分',
          lanhutext2: '获取10积分',
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng037176ac7a1a4b1cc83c2d81f60635787bee197e7e2967d5f81b5dce4247bc1a',
          lanhutext3: '未读',
          lanhutext4: '22/01/02',
        },
      ],
      constants: {},
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>

.outer3 {
  width: 359px;
  height: 296px;
  margin-top: 15px;
  justify-content: space-between;
}
.box1 {
  z-index: 24;
  height: 143px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 1);
  margin-bottom: 10px;
  width: 359px;
  position: relative;
}
.group1 {
  width: 344px;
  height: 122px;
  margin: 13px 0 0 15px;
}
.mod1 {
  width: 344px;
  height: 20px;
}
.word1 {
  width: 284px;
  height: 16px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(132, 132, 132, 1);
  font-size: 16px;
  font-family: SourceHanSansCN-Regular;
  white-space: nowrap;
  line-height: 16px;
  text-align: left;
  margin-top: 1px;
}
.outer4 {
  height: 20px;
  border-radius: 10px 0 0 10px;
  background-color: rgba(255, 176, 49, 1);
  width: 37px;
}
.info2 {
  width: 24px;
  height: 12px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  white-space: nowrap;
  line-height: 12px;
  text-align: left;
  margin: 4px 0 0 8px;
}
.mod2 {
  height: 65px;
  border-radius: 0 2px 2px 0;
  background-color: rgba(244, 248, 251, 1);
  width: 277px;
  margin: 12px 0 0 52px;
}
.bd2 {
  width: 235px;
  height: 16px;
  margin: 25px 0 0 28px;
}
.info3 {
  width: 82px;
  height: 16px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(1, 1, 3, 1);
  font-size: 16px;
  font-family: SourceHanSansCN-Regular;
  white-space: nowrap;
  line-height: 16px;
  text-align: left;
}
.label3 {
  width: 10px;
  height: 10px;
  margin-top: 3px;
}
.mod3 {
  width: 334px;
  height: 17px;
  margin-top: 8px;
}
.info4 {
  width: 24px;
  height: 17px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(250, 108, 62, 1);
  font-size: 12px;
  white-space: nowrap;
  line-height: 17px;
  text-align: left;
}
.word2 {
  width: 53px;
  height: 17px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 12px;
  white-space: nowrap;
  line-height: 17px;
  text-align: left;
}
.group2 {
  z-index: 31;
  position: absolute;
  left: 15px;
  top: 45px;
  width: 65px;
  height: 65px;
  border-radius: 2px 0 0 2px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng058dc0d59a6778d1e95bbe15368358d03271f734aeeaaac59b0d5c1216bcced9)
    100% no-repeat;
}
</style>
